<div class="ss-platform-table" [class.compact]="isCompact">
  <div class="ss-platform-table-header">
    <div class="ss-platform-table-row">
      <div class="ss-platform-table-cell-group">
        <ss-platform-table-cell [templateRef]="cellHeaderSequenceTemplate" [ss-cell]="cellsHash[CellType.sequence]" *ngIf="isEdit"></ss-platform-table-cell>
        <ss-platform-table-cell [templateRef]="cellHeaderBatchTemplate" [ss-cell]="cellsHash[CellType.batch]" *ngIf="isBatchOperation"></ss-platform-table-cell>
      </div>
      <div class="ss-platform-table-cell-group" [style.transform]="scrollbar.valueTransform">
        <ng-container *ngFor="let cell of cells;let index=index;">
          <ss-platform-table-cell [templateRef]="cellHeaderTemplate" [ss-cell]="cell" (changeTitle)="reset()" *ngIf="cell.type==CellType.data"></ss-platform-table-cell>
        </ng-container>
        <ss-platform-table-cell [templateRef]="cellHeaderAddTemplate" [ss-cell]="cellsHash[CellType.add]" *ngIf="isEdit"></ss-platform-table-cell>
      </div>
    </div>
  </div>
  <div class="ss-platform-table-body" [style.width.px]="rect.width">
    <div style="position: absolute;width: 100%;">
      <div class="ss-platform-table-row" *ngFor="let item of items;let index=index">
        <div class="ss-platform-table-cell-group">
          <ss-platform-table-cell [templateRef]="cellSequenceTemplate" [ss-cell]="cellsHash[CellType.sequence]" [ss-index]="index+1" *ngIf="isEdit"></ss-platform-table-cell>
          <ss-platform-table-cell [templateRef]="cellBatchTemplate" [ss-cell]="cellsHash[CellType.batch]" [ss-index]="index+1" *ngIf="isBatchOperation"></ss-platform-table-cell>
        </div>
        <div class="ss-platform-table-cell-group" [style.transform]="scrollbar.valueTransform">
          <ng-container *ngFor="let cell of cells;let index=index;">
            <ss-platform-table-cell [templateRef]="cellTemplate" [ss-cell]="cell" [ss-item]="{}" [ss-index]="index" (changeTitle)="reset()" *ngIf="cell.type==CellType.data"></ss-platform-table-cell>
          </ng-container>
          <ss-platform-table-cell [templateRef]="cellAddTemplate" [ss-cell]="cellsHash[CellType.add]" *ngIf="isEdit"></ss-platform-table-cell>
        </div>
      </div>
    </div>
  </div>
  <div class="ss-platform-table-footer">
    <div class="ss-platform-table-bottom-shadow"></div>
    <div class="ss-platform-table-scrollbar" [ss-size]="rect.width" [ss-targetSize]="rect.scrollWidth" #scrollbar></div>
  </div>
</div>
<!-- =============================== CellTemplate =============================== Start -->
<!-- 表头-序列 -->
<ng-template #cellHeaderSequenceTemplate let-cell="ctrl">
  <div class="ss-platform-table-cell-wraper cell-sequence" [style.width.px]="cell.cell.width">
    <div class="icon"><i>&#xe030;</i></div>
  </div>
</ng-template>
<ng-template #cellSequenceTemplate let-ctrl="ctrl">
  <div class="ss-platform-table-cell-wraper cell-sequence" [style.width.px]="ctrl.cell.width">
    <div class="name"><span>{{ctrl.index}}</span></div>
  </div>
</ng-template>
<!-- 表头-批量操作 -->
<ng-template #cellHeaderBatchTemplate let-ctrl="ctrl">
  <div class="ss-platform-table-cell-wraper cell-batch" [style.width.px]="ctrl.cell.width">
    <input type="checkbox" title="批量操作数据">
  </div>
</ng-template>
<ng-template #cellBatchTemplate let-ctrl="ctrl">
  <div class="ss-platform-table-cell-wraper cell-sequence" [style.width.px]="ctrl.cell.width">
    <div class="name"><span>{{ctrl.index}}</span></div>
  </div>
</ng-template>
<!-- 表头-新增 -->
<ng-template #cellHeaderAddTemplate let-ctrl="ctrl">
  <div class="ss-platform-table-cell-wraper cell-add" [style.width.px]="ctrl.cell.width" (click)="execute('add')">
    <!-- Add -->
    <div class="icon"><i>&#xe004;</i></div>
    <div class="name"><span>添加列</span></div>
  </div>
</ng-template>
<ng-template #cellAddTemplate let-ctrl="ctrl">
  <div class="ss-platform-table-cell-wraper cell-add" [style.width.px]="ctrl.cell.width"></div>
</ng-template>
<!-- 表头-常规 -->
<ng-template #cellHeaderTemplate let-ctrl="ctrl">
  <div class="ss-platform-table-cell-wraper" [class.set]="ctrl.isSet" [style.width.px]="ctrl.cell.width">
    <div class="icon" [ss-platform-popover]="{template:cellChangeDataTypeTemplateRef,context:{ctrl:ctrl},autoClose:true}">
      <i>{{fieldDefinition[ctrl.cell.field.type].icon}}</i>
    </div>
    <div class="name"
         [ss-platform-popover]="{template:{click:cellSetPropertyTemplateRef,dblclick:cellEditTemplateRef},context:{ctrl:ctrl},direction:{left:-42,top:-1},init:ctrl.cellEditInit,onShow:onShowSetFieldPropertyPopover,onHide:onHideSetFieldPropertyPopover}">
      <span>{{ctrl.cell.field.name || "第" + ctrl.index + "列"}}</span><em *ngIf="ctrl.cell.field.isRequired">*</em>
    </div>
    <div class="command" [ss-platform-popover]="{template:cellCommandTemplateRef,context:{ctrl:ctrl},autoClose:true}">
      <i>&#xe031;</i>
    </div>
  </div>
</ng-template>
<ng-template #cellTemplate let-ctrl="ctrl">
  <div class="ss-platform-table-cell-wraper" [style.width.px]="ctrl.cell.width"></div>
</ng-template>
<!-- 编辑框 -->
<ng-template #cellEditTemplateRef let-ctrl="ctrl">
  <div class="ss-platform-popover-content ss-platform-table-cell-edit">
    <div class="icon slide"><i>{{fieldDefinition[ctrl.cell.field.type].icon}}</i></div>
    <div class="name">
      <input type="text" [(ngModel)]="ctrl.cell.field.name" (change)="reset()" (keyup)="$event.which === 13?$app.publish(GlobalEvent.HidePopover):0;"/>
    </div>
  </div>
</ng-template>
<!-- 更改数据类型 -->
<ng-template #cellChangeDataTypeTemplateRef let-ctrl="ctrl">
  <div class="ss-platform-popover-content ss-platform-table-cell-change-type" style="max-height: initial">
    <ul class="clearfix" *ngFor="let groupId of ['01','02','03','04']">
      <ng-container *ngFor="let field of fieldDefinition.list">
        <li [class.current]="ctrl.cell.field.type==field.type" (click)="ctrl.onSetTypeValue(field.type)" *ngIf="field.group==groupId"><i>{{field.icon}}</i><span>{{field.name}}</span></li>
      </ng-container>
    </ul>
  </div>
</ng-template>
<!-- 执行命令 -->
<ng-template #cellCommandTemplateRef let-ctrl="ctrl">
  <div class="ss-platform-popover-content">
    <div class="ss-platform-table-cell-command">
      <ul>
        <li *ngFor="let cmd of [
            ['rename','改列名'],['re-property','改列属性'],['re-type','改列类型'], ['before','在前一列插入'],['after','在后一列插入'],['copy','复制列'],['delete','删除列']
        ]" (click)="execute(cmd[0],ctrl)"><span>{{cmd[1]}}</span></li>
      </ul>
    </div>
  </div>
</ng-template>
<!-- 字段属性 -->
<ng-template #cellSetPropertyTemplateRef let-ctrl="ctrl">
  <div class="ss-platform-popover-content" [@fade] style="width: 215px;padding:0 12px;max-height: initial" ss-platform-popover-direction='{"left":-42,"top":43}'>
    <ss-platform-field [ss-type]="ctrl.cell.field.type" [ss-model]="ctrl.cell.field"></ss-platform-field>
  </div>
</ng-template>
<!-- =============================== CellTemplate =============================== Start -->
